<template>
  <view class="he-page-content" :data-theme="theme">
    <!-- #ifdef MP-WEIXIN-->
    <view
      class="he-box he-get-address"
      @tap="chooseAddress"
      v-if="$h.test.isEmpty(id)"
    >
      <view class="fl iconfont iconaddress_wechataddress"></view>
      <text class="fl he-text">获取微信地址</text>
      <view class="fr iconfont iconbtn_arrow"></view>
    </view>
    <!-- #endif -->
    <view class="he-box he-info">
      <view class="he-info__item flex align-center justify-between">
        <text class="he-item__label">收货人</text>
        <input
          type="text"
          v-model="form.name"
          :maxlength="10"
          class="he-item__value"
          placeholder-style="font-size: 26rpx;font-family: PingFang SC;font-weight: 500;color: #999999;"
          placeholder="请填写收货人姓名（最多10个字）"
        />
      </view>
      <view class="he-info__item flex align-center justify-between">
        <text class="he-item__label">手机号码</text>
        <input
          type="number"
          v-model="form.mobile"
          class="he-item__value"
          :maxlength="11"
          placeholder-style="font-size: 26rpx;font-family: PingFang SC;font-weight: 500;color: #999999;"
          placeholder="请填写手机号码（最多11个数字）"
        />
      </view>
      <view class="he-info__item flex align-center justify-between">
        <text class="he-item__label">所在地区</text>
        <view class="flex align-center" @click="isAddress = true">
          <text
            class="he-item__value he-area-text"
            v-if="form.province && form.city && form.district"
          >
            {{ form.province }}/{{ form.city }}/{{ form.district }}
          </text>
          <text v-else class="he-placeholder he-area-text">请选择所在地区</text>
          <view class="iconfont iconbtn_arrow"></view>
        </view>
      </view>
      <view class="he-info__itemOther flex justify-between">
        <view class="he-item__label">详细地址</view>
        <textarea
          id="textarea"
          @input="setArea"
          :value="form.address"
          :disable-default-padding="true"
          class="he-item__value"
          placeholder-style="font-size: 26rpx;font-family: PingFang SC;font-weight: 500;color: #999999;"
          :maxlength="50"
          placeholder="如街道、小区、门牌号、楼栋号等"
        >
        </textarea>
      </view>
    </view>
    <view class="he-box he-default flex justify-between align-center">
      <view class="he-text">设为默认地址</view>
      <he-switch
        v-model="form.status"
        :active-value="1"
        :inactive-value="0"
        @change="editAddress"
      ></he-switch>
    </view>
    <button class="cu-btn he-save" @click="submit">保存并使用</button>
    <button
      class="cu-btn he-delete"
      @click="strikeOut"
      v-if="!$h.test.isEmpty(id)"
    >
      删除收货地址
    </button>
    <he-select-address
      v-model="isAddress"
      @select="selectArea"
      :select="form"
    ></he-select-address>
  </view>
</template>

<script>
import heSelectAddress from "@/components/he-select-address.vue";
import heSwitch from "@/components/he-switch.vue";

export default {
  name: "address-edit",
  components: {
    heSelectAddress,
    heSwitch,
  },
  data() {
    return {
      form: {
        name: "",
        mobile: "",
        province: "",
        city: "",
        district: "",
        address: "",
        status: 0,
      },
      id: null,
      isAddress: false,
    };
  },
  methods: {
    chooseAddress: function () {
      let _this = this;
      uni.chooseAddress({
        success: function (res) {
          _this.form.name = res.userName;
          _this.form.mobile = res.telNumber;
          _this.form.province = res.provinceName;
          _this.form.city = res.cityName;
          _this.form.address = res.detailInfo;
          _this.form.district = res.countyName;
        },
        fail: function (err) {
          _this.$toError(err);
        },
      });
    },
    getAddress: function (id) {
      let _this = this;
      this.$heshop
        .address("get", id)
        .then(function (res) {
          _this.form = res;
        })
        .catch(function (err) {
          _this.$toError(err);
        });
    },
    setArea: function (e) {
      this.form.address = e.detail.value;
    },
    setStatus: function () {
      this.form.status = this.form.status === 0 ? 1 : 0;
    },
    submit: function () {
      let _this = this;
      if (this.id) {
        this.$heshop
          .address("put", this.id, this.form)
          .then(function () {
            uni.setStorageSync(_this.$storageKey.address, {
              form: _this.form,
              id: _this.id,
              type: "put",
            });
            uni.navigateBack({
              delta: 1,
            });
          })
          .catch(function (err) {
            _this.$toError(err);
          });
      } else {
        this.$heshop
          .address("post", this.form)
          .then(function (res) {
            uni.setStorageSync(_this.$storageKey.address, {
              form: _this.form,
              id: res,
              type: "post",
            });
            uni.navigateBack({
              delta: 1,
            });
          })
          .catch(function (err) {
            _this.$toError(err);
          });
      }
    },
    strikeOut: function () {
      let _this = this;
      this.$heshop
        .address("delete", this.id)
        .then(function () {
          uni.setStorageSync(_this.$storageKey.address, {
            id: _this.id,
            type: "delete",
          });
          uni.navigateBack({
            delta: 1,
          });
        })
        .catch(function (err) {
          _this.$toError(err);
        });
    },
    selectArea: function (area) {
      this.form.province = area[0].name;
      this.form.city = area[1].name;
      this.form.district = area[2].name;
    },
    editAddress: function (val) {
      this.form.status = val;
    },
  },
  onLoad(options) {
    if (options.id) {
      this.id = parseInt(options.id);
      uni.setNavigationBarTitle({
        title: "编辑收货地址",
      });
    }
  },
  watch: {
    id: function (val) {
      this.getAddress(val);
    },
    selectList: function (val) {
      this.form.province = val[0].name;
      this.form.city = val[1].name;
      this.form.district = val[2].name;
    },
  },
};
</script>

<style scoped lang="scss">
.he-page-content {
  padding: 20px;
}

.he-box {
  background: #ffffff;
  border-radius: 16px;
}

.he-get-address {
  height: 96px;
  line-height: 96px;
  padding: 0 24px 0 32px;
  margin-bottom: 16px;
}

.he-get-address .he-text {
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #222222;
  margin-left: 20px;
}

.iconbtn_arrow {
  width: 22px;
  height: 22px;
  font-size: 22px;
  color: #bebebe;
}

.iconaddress_wechataddress {
  width: 36px;
  height: 36px;
  font-size: 36px;
  color: RGBA(70, 187, 54, 1);
}

.he-info {
  padding: 16px 24px;
  margin-bottom: 16px;
}

.he-info__item {
  height: 100px;
  border-bottom: 1px solid #e5e5e5;
}

.he-item__label {
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #222222;
}

.he-item__value {
  width: 506px;
}

.he-area-text {
  width: 484px;
}

.he-placeholder {
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}

.he-info__itemOther {
  padding: 38px 0 0 0;
}

.he-info__itemOther .he-item__label {
}

.he-info__itemOther .he-item__value {
  height: 127px;
}

.he-default {
  height: 96px;
  padding: 0 24px;
}

.he-default .he-text {
  font-size: 26px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #222222;
}

.cu-btn {
  width: 710px;
  height: 80px;
  border-radius: 40px;
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 500;
}

.he-save {
  margin-top: 80px;
  @include background_color("background_color");
  color: #ffffff;
}

.he-delete {
  background: #ffffff;
  border: 1px solid #cccccc;
  color: #222222;
  margin-top: 24px;
}
</style>
